<template>
  <div>
    <!-- 总部库存明细查询 -->
    <TopFilter :list="topFilterList" :cols="3" @filterChange="changeHandle" @onCollapse="collapseHandle" :labelWidth="110" @resetChange="resetChange"></TopFilter>

    <Spin :spinning="exportLoading" tip="Loading...">
      <FilterTables
        ref="table"
        :isSelectColumn="false"
        columnsRef="zjDetailsInquiry"
        :columns="columns"
        :fetchapi="fetchApi"
        :params="fetchParams"
        :datakey="'records'"
        :onColumnsChange="(columns) => (this.columns = columns)"
        :cellstyles="cellstyles"
        :onSyncTableData="tableChangeFun"
      >
        <template slot="controls">
          <multiuse-button size="small" type="primary" :click="exportHandle">导 出</multiuse-button>
        </template>
      </FilterTables>
    </Spin>

    <BaseDialog :visible.sync="issearch" :title="'经销商查询'" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <ownerSeacher :rowData="formData" @close="ownercloseHandler" />
    </BaseDialog>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { queryList, vehicleConfig, getFactoryWarehouseList, getWarehouseList, exportExcel, exporturl } from '@/api/omSale/HeadquartersInventory/DetailsInquiry';
import { exportFile, exportExcelFile } from '@/utils/index';
import ownerSeacher from './ownerSeacher';
import {
  getCarOEM,
  getBrandListOEM,
  getSeriesListOEM,
  getModelListOEM,
  getPackageListOEM,
  getOptionListDictOEM,
  getWcolorList,
  getIcolorList,
  addCar,
  updateCar,
  getCarExport,
  importCar,
  getExcelList,
  getExcelListV3,
} from '@/api/common/cars/masterDataCars';
export default {
  name: 'DetailsInquiry',
  mixins: [dictionary],

  data() {
    this.BaseTable = null;
    return {
      topFilterList: this.createdFrom(),
      columns: this.createdTable(),
      fetchApi: queryList,
      fetchParams: {},
      formData: {},
      issearch: false,
      exportLoading: false,
      cellstyles: [],
    };
  },
  components: {
    ownerSeacher,
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  created() {
    this.getFactoryList();
    this.getList();
    this.vehicleInfo();
    this.getDictBrandList();
    this.getColors();
    this.getIColors();
  },

  methods: {
    resetChange(params) {
      this.topFilterList.find((item) => item.fieldName === 'seriesId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'seriesId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'modelId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'modelId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'packageId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'packageId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'optionId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'optionId').itemList = [];
      const str = this.topFilterList.find((x) => x.fieldName == 'configId');

      this.$refs.TopFilter.RESET_FORM();
      this.fetchParams = Object.assign({}, this.fetchParams, params);
    },
    async getDictBrandList() {
      const res = await getBrandListOEM();
      if (res.resultCode === 200) {
        this.topFilterList.find((item) => item.fieldName === 'brandId').itemList = res.data.map((x) => ({ value: x.brandId, text: x.brandName }));
        // this.topFilterList = [...this.topFilterList]
      }
    },
    async changeBrandSelect(brandsid) {
      // if (!brandsid) {
      this.topFilterList.find((item) => item.fieldName === 'seriesId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'seriesId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'modelId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'modelId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'packageId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'packageId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'optionId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'optionId').itemList = [];
      // } else {
      if (brandsid) {
        const res = await getSeriesListOEM(brandsid);
        if (res.resultCode === 200) {
          this.topFilterList.find((item) => item.fieldName === 'seriesId').itemList = res.data.map((x) => ({ value: x.seriesId, text: x.seriesName }));
        }
      }
    },
    async changeSeriesSelect(seriessid) {
      const brandsid = this.topFilterList.find((item) => item.fieldName === 'brandId').initialValue;
      this.topFilterList.find((item) => item.fieldName === 'modelId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'modelId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'packageId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'packageId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'optionId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'optionId').itemList = [];
      if (brandsid && seriessid) {
        const res = await getModelListOEM(brandsid, seriessid);
        if (res.resultCode === 200) {
          this.topFilterList.find((item) => item.fieldName === 'modelId').itemList = res.data.map((x) => ({ value: x.modelId, text: x.modelName }));
        }
      }
    },
    async changeModelSelect(modelId) {
      const brandsid = this.topFilterList.find((item) => item.fieldName === 'brandId').initialValue;
      const seriessid = this.topFilterList.find((item) => item.fieldName === 'seriesId').initialValue;
      // if (!brandsid || !seriessid || !modelId) {
      this.topFilterList.find((item) => item.fieldName === 'packageId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'packageId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'optionId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'optionId').itemList = [];
      // } else {
      if (modelId) {
        const res = await getPackageListOEM(brandsid, seriessid, modelId);
        if (res.resultCode === 200) {
          this.topFilterList.find((item) => item.fieldName === 'packageId').itemList = res.data.map((x) => ({ value: x.packageId, text: x.configName }));
        }
      }
      // }
    },
    async changePackageSelect(packageId) {
      const brandsid = this.topFilterList.find((item) => item.fieldName === 'brandId').initialValue;
      const seriessid = this.topFilterList.find((item) => item.fieldName === 'seriesId').initialValue;
      // if (!brandsid || !seriessid || !modelId) {
      this.topFilterList.find((item) => item.fieldName === 'optionId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'optionId').itemList = [];
      // } else {
      if (packageId) {
        const res = await getOptionListDictOEM(packageId);
        if (res.resultCode === 200) {
          this.topFilterList.find((item) => item.fieldName === 'optionId').itemList = res.data.map((x) => ({ value: x.optionId, text: x.optionName }));
        }
      }
      // }
    },
    async getColors() {
      const res = await getWcolorList();
      if (res.resultCode === 200) {
        this.topFilterList.find((item) => item.fieldName === 'colorId').itemList = res.data.map((x) => ({ value: x.colorId, text: x.colorName }));
      }
    },
    async getIColors() {
      const res = await getIcolorList();
      if (res.resultCode === 200) {
        this.topFilterList.find((item) => item.fieldName === 'trimColorId').itemList = res.data.map((x) => ({ value: x.colorId, text: x.colorName }));
      }
    },
    // 工厂库
    async getFactoryList() {
      const res = await getFactoryWarehouseList();
      if (res.resultCode == 200) {
        res.data.list.map((x) => {
          this.topFilterList.find((item) => item.fieldName === 'warehouseId').itemList.push({ text: x.warehouseName, value: x.warehouseId });
        });
      }
    },
    // 仓库名称
    async getList() {
      const res = await getWarehouseList();
      if (res.resultCode == 200) {
        res.data.list.map((x) => {
          this.topFilterList.find((item) => item.fieldName === 'subWarehouseId').itemList.push({ text: x.warehouseName, value: x.warehouseId });
        });
      }
    },
    // 车型选择
    async vehicleInfo() {
      let res = await vehicleConfig(0, { isUnlimited: 10041001 });
      this.topFilterList.find((item) => item.fieldName === 'vehicleInfo').itemList = res.data;
    },

    // 数据变化，vin变色
    tableChangeFun(dataList) {
      dataList.forEach((item, index) => {
        if (item.warnColorCode == '2001900003') {
          this.cellstyles.push({ row: item, dataIndex: 'vin', styles: { backgroundColor: 'red' } });
        }
        if (item.warnColorCode == '2001900002') {
          this.cellstyles.push({ row: item, dataIndex: 'vin', styles: { backgroundColor: 'yellow' } });
        }
        if (item.warnColorCode == '2001900001') {
          this.cellstyles.push({ row: item, dataIndex: 'vin', styles: { backgroundColor: 'green' } });
        }
      });
    },

    // 导出
    async exportHandle() {
      await this.$confirm('是否将Excel表格保存至本地文件夹?', '提示', {
        confirmButtonText: '下载',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.exportLoading = true;

          exportExcel(this.fetchParams)
            .then((response) => {
              exportExcelFile(response.data, '总部库存明细查询');
              this.exportLoading = false;
            })
            .catch((err) => {});
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
    },
    seacherFun() {
      this.issearch = true;
    },
    ownercloseHandler(val) {
      if (val) {
        this.topFilterList.map((x) => {
          if (x.fieldName == 'dealerCode') {
            x.initialValue = val.dealerCode;
          }
        });
      }
      this.issearch = false;
    },
    changeHandle(params) {
      this.fetchParams.xhrAbort = false;
      this.fetchParams = Object.assign({}, this.fetchParams, params);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    createdFrom() {
      return [
        {
          type: 'INPUT',
          label: '经销商代码',
          fieldName: 'dealerCode',
          placeholder: '请选择',
          hidden: true,
          unitRender: () => {
            return (
              <div>
                <el-button icon="el-icon-search" onClick={() => this.seacherFun(1)}></el-button>
              </div>
            );
          },
        },
        {
          type: 'INPUT',
          label: '经销商名称',
          hidden: true,
          fieldName: 'dealerName',
          placeholder: '请输入',
        },

        {
          type: 'TEXT_AREA',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: '请输入',
          maxlength: '',
          maxRows: 2,
        },
        {
          type: 'INPUT',
          label: '工厂库',
          fieldName: 'warehouseName',
          placeholder: '请选择',
        },
        {
          type: 'INPUT',
          label: '批售订单号',
          fieldName: 'orderNo',
          placeholder: '请输入',
        },
        {
          type: 'SELECT',
          label: '车辆状态',
          fieldName: 'vehicleStatus',
          placeholder: '请选择',
          itemList: this.createDictList('2113').filter((item) => item.value == '21131001' || item.value == '21131002' || item.value == '21131003'),
        },
        {
          type: 'INPUT',
          label: '物料编码',
          fieldName: 'productCode',
          placeholder: '请输入',
        },
        {
          type: 'SELECT',
          label: '品牌',
          fieldName: 'brandId',
          placeholder: '请选择',
          itemList: [],
          change: (val) => {
            this.changeBrandSelect(val);
          },
        },
        {
          type: 'SELECT',
          label: '车系',
          fieldName: 'seriesId',
          placeholder: '请选择',
          itemList: [],
          change: (val) => {
            this.changeSeriesSelect(val);
          },
        },
        {
          type: 'SELECT',
          label: '车型',
          fieldName: 'modelId',
          placeholder: '请选择',
          itemList: [],
          change: (val) => {
            this.changeModelSelect(val);
          },
        },
        {
          type: 'SELECT',
          label: '配置',
          fieldName: 'packageId',
          placeholder: '请选择',
          itemList: [],
          change: (val) => {
            this.changePackageSelect(val);
          },
        },
        {
          type: 'SELECT',
          label: '选装',
          fieldName: 'optionId',
          placeholder: '请选择',
          itemList: [],
        },
        {
          type: 'SELECT',
          label: '外饰',
          fieldName: 'colorId',
          placeholder: '请选择',
          itemList: [],
        },
        {
          type: 'SELECT',
          label: '内饰',
          fieldName: 'trimColorId',
          placeholder: '请选择',
          itemList: [],
        },
        // {
        //   type: 'SELECT',
        //   label: '是否锁定',
        //   fieldName: 'isLock',
        //   placeholder: '请选择',
        //   itemList: this.createDictList('1004'),
        // },
        {
          type: 'RANGE_DATE',
          label: '入库日期',
          fieldName: 'beginVehicleCreatedAt|endVehicleCreatedAt',
          placeholder: '请选择',
          initialValue: [],
          dateType: 'exactdaterange',
        },
        {
          type: 'RANGE_DATE',
          label: '下线日期',
          fieldName: 'beginProductDate|endProductDate',
          placeholder: '请选择',
          initialValue: [],
          dateType: 'exactdaterange',
        },
        {
          type: 'SELECT',
          label: '批售退车标记',
          fieldName: 'returnFlag',
          placeholder: '请选择',
          itemList: this.createDictList('1004'),
        },
        {
          type: 'SELECT',
          label: '预警提醒',
          fieldName: 'warnColorCode',
          placeholder: '请选择',
          itemList: [
            { text: '红色预警', value: 1 },
            { text: '黄色预警', value: 2 },
            { text: '绿色预警', value: 3 },
          ],
        },
        {
          type: 'INPUT',
          label: '公告号',
          fieldName: 'announceNo',
          placeholder: '请选择',
          itemList: [],
        },

        // {
        //   type: 'INPUT_CASCADER',
        //   label: '车型选择',
        //   fieldName: 'vehicleInfo',
        //   placeholder: '请选择',
        //   options: { titles: ['品牌', '车系', '车型', '配置', '选装', '颜色'] },
        //   itemList: []
        // },
      ];
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },

        {
          title: 'VIN',
          dataIndex: 'vin',
          align: 'center',
          width: 180,
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '物料编码',
          dataIndex: 'productCode',
          sorter: true,
          filter: true,
          filterType: 'input',
          align: 'center',
          width: 200,
        },

        {
          title: '物料描述',
          dataIndex: 'productName',
          sorter: true,
          filter: true,
          align: 'center',
          width: 400,
          filterType: 'input',
        },
        {
          title: '品牌',
          dataIndex: 'brandName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '车系',
          dataIndex: 'seriesName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },

        {
          title: '车型',
          dataIndex: 'modelName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '配置',
          dataIndex: 'packageName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '选装',
          dataIndex: 'optionName',
          align: 'center',
          width: 250,
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '内饰',
          dataIndex: 'trimName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '外饰',
          dataIndex: 'colorName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '公告号',
          dataIndex: 'announceNo',
          sorter: true,
          filter: true,
          filterType: 'input',
          align: 'center',
          width: 200,
        },

        {
          title: '市场指导价',
          dataIndex: 'basicPrice',
          sorter: true,
          filter: true,
          filterType: 'input',
          align: 'right',
          precision: 2,
          numberFormat: true,
        },
        {
          title: '是否三方车辆',
          dataIndex: 'isTripartite',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1004'),
          render: (props) => {
            return <span>{this.createDictText(props.row.isTripartite, '1004')}</span>;
          },
        },
        {
          title: '三方票号',
          dataIndex: 'billNo',
          sorter: true,
          filter: true,
          filterType: 'input',
          align: 'center',
          width: 200,
        },
        {
          title: '车辆状态',
          dataIndex: 'vehicleStatus',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('2113').filter((item) => item.value == '21131001' || item.value == '21131002' || item.value == '21131003'),
          render: (props) => {
            return <span>{this.createDictText(props.row.vehicleStatus, '2113')}</span>;
          },
        },
        // {
        //   title: '订单占用',
        //   dataIndex: 'matchFlag',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: this.createDictList('1004'),
        //   render: (props) => {
        //     return <span>{this.createDictText(props.row.returnFlag, '1004')}</span>;
        //   },
        // },
        {
          title: '批售订单号', //批售订单号
          dataIndex: 'doNo',
          sorter: true,
          filter: true,
          filterType: 'input',
          align: 'center',
          width: 200,
        },
        //  {
        //   title: '已审订单号',     //销售订单号
        //   dataIndex: 'doNo',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input',
        //   align: 'center',
        //   width: 200
        // },

        // {
        //   title: '是否锁定',
        //   dataIndex: 'isLock',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: this.createDictList('1004'),
        //   render: (props) => {
        //     return <span>{this.createDictText(props.row.isLock, '1004')}</span>;
        //   },
        // },
        // {
        //   title: '锁定备注',
        //   dataIndex: 'lockRemark',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input',
        // },
        // {
        //   title: '锁定人',
        //   dataIndex: 'lockPerson',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input',
        // },
        // {
        //   title: '锁定时间',
        //   dataIndex: 'lockDate',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input',
        // },
        {
          title: '工厂库',
          dataIndex: 'warehouseName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '库位',
          dataIndex: 'subWarehouseName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '下线日期',
          dataIndex: 'productDate',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          dateFormat: 'yyyy-MM-dd',
        },
        {
          title: '入库日期',
          dataIndex: 'vehicleCreatedAt',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          dateFormat: 'yyyy-MM-dd',
        },
        {
          title: '车龄(天)',
          dataIndex: 'productDateAge',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '库龄(天)',
          dataIndex: 'postingDateAge',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '发动机号',
          dataIndex: 'engineNo',
          sorter: true,
          filter: true,
          filterType: 'input',
          align: 'center',
          width: 200,
        },
        {
          title: '电机号',
          dataIndex: 'motorNo',
          sorter: true,
          filter: true,
          filterType: 'input',
          align: 'center',
          width: 200,
        },
        {
          title: '电池号',
          dataIndex: 'batteryNo',
          sorter: true,
          filter: true,
          filterType: 'input',
          align: 'center',
          width: 200,
        },
        {
          title: '合格证号',
          dataIndex: 'certificateNo',
          sorter: true,
          filter: true,
          filterType: 'input',
          align: 'center',
          width: 200,
        },
        {
          title: '批售退车标示',
          dataIndex: 'returnFlag',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1004'),
          render: (props) => {
            return <span>{this.createDictText(props.row.returnFlag, '1004')}</span>;
          },
        },

        // {
        //   title: '所属公司',
        //   dataIndex: 'powerCompany',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: this.createDictList('6008'),
        //   render: props => {
        //     return <span>{this.createDictText(props.row.powerCompany, '6008')}</span>;
        //   }
        // },

        // {
        //   title: '订单类型',
        //   dataIndex: 'orderType',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: this.createDictList('6006'),
        //   render: props => {
        //     return <span>{this.createDictText(props.row.orderType, '6006')}</span>;
        //   }
        // },

        // {
        //   title: 'CMS入库日期',
        //   dataIndex: 'cmsCreatedAt',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'date-range',
        //   dateFormat: 'yyyy-MM-dd'
        // },
      ];
    },
  },
};
</script>
